/*
 * @Author: 自迩
 * @Date: 2022-03-22 21:35:51
 * @LastEditTime: 2022-03-23 21:23:32
 * @LastEditors: your name
 * @Description:
 * @FilePath: \class-ending-homework\src\components\UserSchool\index.jsx
 */
import React, {useState} from 'react'
import './index.css'
//省列表
const localList = ['湖南省','湖北省','江苏省','上海市','北京市','天津市','四川省','陕西省','广东省']
//学校列表
const schoolList = [
    ['湖南大学','中南大学','国防科技大学','湖南师范大学','湘潭大学','吉首大学','湖南农业大学','中南林业科技','湖南中医药大','湖南理工学院','湖南文理学院','湖南工商大学','南华大学'],
    ['武汉大学','华中科技大学','武汉理工大学','中国地质大学','中南财经政法大学','华中师范大学','华中农业大学'],
    ['南京大学','东南大学','苏州大学','南京师范大学','中国矿业大学','中国药科大学','河海大学','南京理工大学','江南大学'],
    ['复旦大学','上海交通大学','同济大学','上海财经大学','上海外国语大学','华东师范大学','东华大学','上海大学','华东理工大学'],
    ['清华大学','北京大学','中国人民大学','北京理工大学','北京交通大学','北京科技大学','北京化工大学','北京邮电大学','北京工业大学','中国农业大学','北京林业大学','中国传媒大学'],
    ['南开大学','天津大学','河北工业大学','天津医科大学'],
    ['四川大学','电子科技大学','西南交通大学','西南财经大学','四川农业大学'],
    ['西安交通大学','西北工业大学','西安电子科技大学','西北大学','长安大学','第四军医大学'],
    ['中山大学','暨南大学','华南理工大学','华南师范大学']
]

export default function Enroll(props) {

    let {style,userBox,selectedLocal,selectedSchool,} = props
    let {schoolBoxMouseOver,schoolBoxMouseOut,localTableClick,schoolTableClick} = props
    // console.log(schoolList[localList.indexOf(selectedLocal)]);
    return (
        <div id="user-school-box">
            <p>选择您的学校</p>
            <div className={style} id="user-school" onMouseOver={schoolBoxMouseOver} onMouseOut={schoolBoxMouseOut}>{selectedSchool}</div>
            <div  id="user-school-table" style={{visibility:userBox}} onMouseOver={schoolBoxMouseOver} onMouseOut={schoolBoxMouseOut}>
                <table id="local-table" onClick={localTableClick}>
                    <tbody>
                        {
                            localList.map((local)=>{
                                let fontWeight = 400
                                if(local == selectedLocal)
                                    fontWeight = 700
                                return (<tr key={local}><td style={{fontWeight:fontWeight}}>{local}</td></tr>)
                            })
                        }
                    </tbody>
                </table>
                <table id="school-table" onClick={schoolTableClick}>
                    <tbody>
                        {
                            schoolList[localList.indexOf(selectedLocal)].map((school,index)=>{
                                if(index%2 !== 0){
                                    let fontWeight = [400,400]
                                    if(schoolList[localList.indexOf(selectedLocal)][index-1] == selectedSchool)
                                        fontWeight[0] = 700
                                    if(school == selectedSchool)
                                        fontWeight[1] = 700

                                    return (<tr key={school}><td style={{fontWeight:fontWeight[0]}}>{schoolList[localList.indexOf(selectedLocal)][index-1]}</td><td style={{fontWeight:fontWeight[1]}}>{school}</td></tr>)
                                }

                                if(index === schoolList[localList.indexOf(selectedLocal)].length-1){
                                    let fontWeight = 400
                                    if(school == selectedSchool)
                                        fontWeight = 700
                                    return (<tr key={school}><td style={{fontWeight:fontWeight}}>{school}</td></tr>)
                                }

                            })
                        }
                    </tbody>
                </table>
            </div>
        </div>
  )
}
